<template>
  <div>

    <div class="wrap">
              <el-button type="text" icon="el-icon-arrow-left" class="exit" size="mini" @click="gotoBack">返回</el-button>

      <div class="title_wrap">任务单自动识别系统</div>
      <div class="table_wrap">
        <el-table
          :data="tableData"
          border
          height="700"
          :row-style="rowStyle"
          :header-cell-style="{ background: 'rgba(0,0,0,1)', color: '#fff' }"
          style="width: 80%"
        >
          <el-table-column prop="fileId" label="ID" width="120">
          </el-table-column>
          <el-table-column prop="types" label="关键字"> </el-table-column>
          <el-table-column prop="filePath" label="模板文件路径" width="420">
          </el-table-column>
          <el-table-column prop="category" label="类型" :formatter="format">
          </el-table-column>
          <el-table-column prop="wordName" label="文件名"> </el-table-column>
          <el-table-column prop="address" label="操作">
            <template slot-scope="row">
              <el-button
                type="primary"
                icon="el-icon-edit"
                @click="editData(row)"
              ></el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                @click="deleteData(row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="tableInfo.pagenum"
        :page-size="tableInfo.pagesize"
        :page-sizes="[15, 20, 25, 30]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
      ></el-pagination>
    </div>
    <el-dialog
      title="修改操作项"
      :visible.sync="dialogEditVisible"
      width="50%"
      @close="closeManyDialog"
    >
      <el-form :model="editForm" ref="manyRef" label-width="120px">
        <el-form-item label="ID">
          <el-input v-model="editForm.fileId" disabled></el-input>
        </el-form-item>
        <el-form-item label="关键字">
          <el-input v-model="editForm.types"></el-input>
        </el-form-item>
        <el-form-item label="模板文件路径">
          <el-input v-model="editForm.filePath"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <!-- <el-input v-model="editForm.category"></el-input> -->
          <el-select
            v-model="value"
            placeholder="请选择"
            @change="handleChange"
            ref="selectCh"
          >
            <el-option
              v-for="item in options"
              :key="item.typeNumber"
              :label="item.typesName"
              :value="item.typesName"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="文件名">
          <el-input v-model="editForm.wordName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogEditVisible = false">取 消</el-button>
        <el-button type="primary" @click="putEditParams">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      total: 0,
      tableInfo: {
        pagesize: 15,
        pagenum: 0,
      },
      category: "",
      dialogEditVisible: false,
      editForm: {},
      options: [],
      value: "",
      number: "",
      putData: {}
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      this.axios({
        url:
          "/queryAllOrdinaryData?pageSize=" +
          this.tableInfo.pagesize +
          "&pageNum=" +
          this.tableInfo.pagenum,
        method: "GET",
      }).then((res) => {
        console.log(res);
        this.tableData = res.data.list;
        this.total = res.data.total;
        this.category = res.data.category;
      });
    },
    rowStyle({ row, rowIndex }) {
      if (row) {
        return { backgroundColor: "rgba(0, 0, 0, 0.5)" };
      }
    },
    cellStyle({ cell, cellIndex }) {
      if (cell) {
        return { backgroundColor: "rgba(255, 255, 255, 0.1)" };
      }
    },
    handleSizeChange(newSize) {
      this.tableInfo.pagesize = newSize;
      this.getData();
    },
    handleCurrentChange(newNum) {
      this.tableInfo.pagenum = newNum;
      this.getData();
    },
    editData(row) {
      this.putData = row.row
      if (row.row.category === "1") {
        this.value = "10千伏出线/分段";
      } else if (row.row.category === "2") {
        this.value = "10千伏电容器";
      } else if (row.row.category === "4") {
        this.value = "35千伏进线";
      } else if (row.row.category === "5") {
        this.value = "10千伏母线";
      } else if (row.row.category === "6") {
        this.value = "一号主变";
      } else if (row.row.category === "7") {
        this.value = "二号主变";
      } else if (row.row.category === "3") {
        this.value = "压变避雷针";
      } else if (row.row.category === "8") {
        this.value = "X号主变10千伏";
      } else if (row.row.category === "9") {
        this.value = "2号主变10千伏引线插头";
      } else if (row.row.category === "10") {
        this.value = "站用变";
      } else if (row.row.category === "11") {
        this.value = "主变35千伏";
      } else if (row.row.category === "12") {
        this.value = "主变110千伏";
      }
      this.axios({ url: "/getCzpType" }).then((res) => {
        this.options = res.data;
      });
      this.editForm = row.row;
      this.dialogEditVisible = true;
    },
    closeManyDialog() {
      this.$refs.manyRef.resetFields();
    },
    deleteData(row) {
      var that =this
      this.axios({
        url: "deleteOrdinaryData?fileId=" + row.row.fileId,
        method: "DELETE",
      }).then((res) => {
        console.log(res);
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            if(res.data) {
                this.$message({
                type: "success",
                message: "删除成功!",
              });
              that.getData()
            }
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      });
    },
    putEditParams() {
      this.axios({
        url: '/updateOrdinaryData',
        method: 'PUT',
        data: this.putData
      })
      .then(res => {
        console.log(res)
        if(res.data) {
          this.getData()
          this.dialogEditVisible = false
        }
      })
    },
    handleChange(e) {
      var obj = {}
      obj = this.options.find(function(item){
        return item.typesName === e
      })
      this.number = obj.typeNumber
      console.log(this.number)
    },
    format(row, index) {
      if (row.category === "1") {
        return "10千伏出线/分段";
      } else if (row.category === "2") {
        return "10千伏电容器";
      } else if (row.category === "4") {
        return "35千伏进线";
      } else if (row.category === "5") {
        return "10千伏母线";
      } else if (row.category === "6") {
        return "一号主变";
      } else if (row.category === "7") {
        return "二号主变";
      } else if (row.category === "3") {
        return "压变避雷针";
      } else if (row.category === "8") {
        return "X号主变10千伏";
      } else if (row.category === "9") {
        return "2号主变10千伏引线插头";
      } else if (row.category === "10") {
        return "站用变";
      } else if (row.category === "11") {
        return "主变35千伏";
      } else if (row.category === "12") {
        return "主变110千伏";
      }
    },
    gotoBack() {
      this.$router.push('/showType')
      
    }
  },
};
</script>
<style lang="scss" scoped>
.exit {
  text-align: center;
    margin-top: 20px;
    margin-left: 30px;
    font-size:16px;
}
.wrap {
  background: url("../assets/bg.png") no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  position: fixed;
  margin-top: -8px;
  margin-left: -8px;
}
.title_wrap {
  color: white;
  font-size: 50px;
  font-weight: 600;
  margin-top: -15px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.table_wrap {
  margin-top: 90px;
}
.el-table {
  color: #fff;
  font-size: 14px;
  margin: auto;
}
.el-table /deep/ th > .cell {
  text-align: center;
  font-size: 22px;
  height: 35px;
  line-height: 35px;
}
.el-table /deep/ .cell {
  text-align: center;
}
/deep/ .el-table,
.el-table__expanded-cell {
  background-color: transparent; //这是设置透明背景色
}
.el-pagination {
  margin-left: 10%;
  margin-top: 25px;
}
// 修改 “共xxx条” 样式
/deep/ .el-pagination .el-pagination__total {
  color: #fff;
}
// 需要 “第xxx页” 样式
/deep/ .el-pagination .el-pagination__jump {
  color: #fff;
}
// 修改hover行的背景色
.el-table /deep/tbody tr:hover > td {
  background-color: #333;
}
.v-modal {
  display: none;
}
</style>